<template>
  <div>
    <h2>App:{{ page }}</h2>
    <!-- // value="xxx",@input="fff" 所以内部必须使用value接收 -->
    <!--  原始方式
    <ChildrenVue
      :page="page"
      :limit="limit"
      @update:limit="limit = $event"
      @update:page="page = $event"
    ></ChildrenVue> -->

    <!-- 使用.sync修饰符会生成一组 update:xxx  函数,自动成为子组件的自定义事件,子组件可以直接调用,其中接收子组件的参数修改:后的值  -->
    <ChildrenVue :page.sync="page" :limit.sync="limit"></ChildrenVue>
    <p>当前为{{ limit }}条每页</p>
  </div>
</template>

<script>
import ChildrenVue from './components/children.vue'
export default {
  name: 'App',
  data() {
    return {
      page: 1,
      limit: 10,
    }
  },
  components: {
    ChildrenVue,
  },
  methods: {
    test() {
      console.log(arguments)
    },
  },
}
</script>

<style></style>
